<!doctype html>
<html class="no-js fixed-layout">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发表文章</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="__Cssjs__/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__Cssjs__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="__Cssjs__/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="__Cssjs__/assets/css/admin.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<header class="am-topbar am-topbar-inverse admin-header">
    {include file="public/head"}
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    {include file="public/sidebar"}
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">发表文章</strong> / <small>撰写博文</small></div>
            </div>
            <hr>
            <form class="am-form" autocomplete="off">
                <fieldset>
                    <label for="cate_m">栏目</label>
                    <div class="am-form-group">
                        <select id="cate_m">
                            {volist name='category_list' id='cate'}
                            <option value="{$cate.id}">{$cate.name}</option>
                            {/volist}
                        </select>
                        <!-- 需要启用二级栏目的时候，取消注释即可
                        <br>
                        <div id="cate_ves">

                        </div>
                        -->
                    </div>

                    <div class="am-form-group">
                        <label for="title">标题</label>
                        <input type="text" class="" id="title" placeholder="输入标题">
                    </div>

                    <div class="am-form-group">
                        <label for="tag">标签</label>
                        <input type="text" class="" id="tag" placeholder="添加标签">
                    </div>

                    <div class="am-form-group am-form-file">
                        <label for="filePicker">文章图片/<small>留空则使用默认图片</small></label>
                        <!--
                        <div >
                            <button type="button" class="am-btn am-btn-default am-btn-sm">
                                <i class="am-icon-file-image-o"></i> 选择图片</button>
                        </div>
                        -->
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker"><i class="am-icon-file-image-o"></i>选择图片</div>
                    </div>

                    <div class="am-form-group">
                        <label for="wangEdit">正文</label>
                        <div id="wangEdit" style="height: 320px;"></div>
                    </div>
                    <p><button type="button" class="am-btn am-btn-default" onclick="post()">提交</button></p>
                </fieldset>
            </form>
        </div>
    </div>

    <!-- 测试弹出层 start-->
    <div class="am-modal am-modal-alert" tabindex="-1" id="success_alert">
        <div class="am-modal-dialog">

            <img class="am-modal-hd" src="__Cssjs__/assets/i/success.png">
            <div class="am-modal-bd">
                发表成功！
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    <!-- 测试弹出层 end-->


    <!-- content end -->

</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="__Cssjs__/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__Cssjs__/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="__Cssjs__/assets/js/amazeui.min.js"></script>
<script src="__Cssjs__/assets/js/amazeui.dialog.min.js"></script>
<script src="__Cssjs__/assets/js/app.js"></script>
<script src="__Cssjs__/vendor/wangEditor/dist/js/wangEditor.min.js"></script>
<link rel="stylesheet" href="__Cssjs__/vendor/wangEditor/dist/css/wangEditor.min.css">
<script type="text/javascript" src="__Cssjs__/vendor/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="__Cssjs__/vendor/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="__Cssjs__/vendor/webuploader/style.css">
<script type="text/javascript">
    var editor = new wangEditor('wangEdit');
    editor.create();
</script>
<script type="text/javascript">
    var category_m_id='';
    var category_b_id=''
    $(function () {
        category_m_id=$("#cate_m").val();
        $("#cate_b").remove();
        $.post("/admin/post/cate_b",{"pid":$("#cate_m").val()},function (data) {
            if(data!=0){
                $("#cate_ves").append("<select id='cate_b'><option selected value=''>请选择（可留空^_^）</option></select>");
                $.each(data,function () {
                    $("#cate_b").append("'<option value='"+this.id+"'>"+this.name+"</option>'");
                })
            }
        },"json")
    });

    function upload() {

    }
    $(function () {
        var $ = jQuery,
            $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,

            // swf文件路径
            swf: '__Cssjs__/vendor/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '/admin/post/upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                ),
                $img = $li.find('img');

            $list.empty(); //如果多图，就删除该句
            $list.append( $li );

            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
    });

    $("#cate_m").on('change',function () {
        category_m_id=$(this).val();
        $("#cate_b").remove();
        $.post("/admin/post/cate_b",{"pid":$("#cate_m").val()},function (data) {
            if(data!=0){
                $("#cate_ves").append("<select id='cate_b'><option selected value=''>请选择（可留空^_^）</option></select>");
                $.each(data,function () {
                    $("#cate_b").append("'<option value='"+this.id+"'>"+this.name+"</option>'");
                })
            }
        },"json")
    });

    $("#cate_b").on('change',function () {
        category_b_id=$(this).val();
    });
    function post() {
        //alert("category_m_id"+category_m_id+"category_b_id"+category_b_id);
        var content=editor.$txt.html();
        var title=$("#title").val();
        var tag=$("#tag").val();
        var intro=editor.$txt.text();
        $.ajax({
            url:"/admin/post/post",
            type:"post",
            data:{"title":title,"content":content,"tag":tag,"intro":intro,"category_m_id":category_m_id,"category_b_id":category_b_id},
            dataType:"json",
            success:function (data) {
                if (data=='success'){
                    //$("#success_alert").modal(); 弹出层使用
                    AMUI.dialog.alert({
                        content:'发表成功！',
                        onConfirm: function() {
                            console.log('close');
                            window.location.reload();
                        }
                    });

                }
            },
            error:function (jqXHR) {
                alert("AJAX错误，返回状态："+jqXHR.status);
            }
        })
    }
</script>
</body>
</html>